<template>
    <div class="page">
        <div class="breadcrumbBar">
            <el-breadcrumb separator="/"> 
                <el-breadcrumb-item>基础数据</el-breadcrumb-item>
                <el-breadcrumb-item>采集通道</el-breadcrumb-item>
            </el-breadcrumb> 
        </div>
        <div class="tableCard">
            <div class="tabToolbar">
                <div class="title">采集通道</div>
                <div class="filter">
                    <div class="item">
                        <el-space wrap>
                            <el-text class="mx-1">采集终端</el-text>                            
                            <el-cascader style="width:300px" v-model="pageState.filterTerValue" :options="dicts.sysTerData" :props="props" @change="refresh"/> 
                        </el-space>
                    </div>
                </div>                
                <div class="actions">
                    <el-space wrap>
                        <el-button @click="refresh" type="primary" plain><i class="fa fa-refresh btnicon"></i> 刷新</el-button> 
                        <el-button @click="acShowEdit( 0  )" type="primary" plain><i class="fa fa-plus btnicon"></i> 新建系统</el-button>  
                    </el-space>
                </div>
            </div>
            <div class="tabContainer">
                <div class="tab_details">
                    <div class="tabPan">
                        <el-table :data="tabDatas" stripe style="width: 100%">
                            <el-table-column prop="channelId" label="ID" width="70" />
                            <el-table-column prop="channelCode" label="编号" width="120" />
                            <el-table-column prop="channelName" label="名称" width="220" />    
                            <el-table-column prop="channelDesc" label="备注" />
                            <el-table-column  label="操作" width="240">
                                <template #default="scope">
                                    <el-space wrap>
                                        <el-button link type="primary" size="small" @click.prevent="acShowEdit(scope.row.channelId ,scope.row)">
                                            修改
                                        </el-button> 
                                        <el-button link type="danger" size="small" @click.prevent="acDelete(scope.row)">
                                            删除
                                        </el-button>  
                                    </el-space>
                                </template>

                            </el-table-column>
                        </el-table> 
                    </div> 
                </div>
            </div>
        </div>

        <el-dialog
            v-model="editDlg.status"
            title="采集通道"
            width="500"
            draggable
            overflow
            :close-on-click-modal="false"
        >
            <div class="editForm">
                <div class="edRow">
                    <div class="lab">编号</div>
                    <div class="edit">
                        <el-input v-model="editDlg.info.channelCode"></el-input>
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">名称</div>
                    <div class="edit">
                        <el-input v-model="editDlg.info.channelName"></el-input>
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">通信协议</div>
                    <div class="edit"> 
                        <el-select style="width:100%" v-model="editDlg.info.protocolTypeCode" >
                            <el-option v-for="item in dicts.protocolTypes" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
                        </el-select>
                    </div>
                </div> 
                <div class="edRow">
                    <div class="lab">数据服务器</div>
                    <div class="edit"> 
                        <el-select style="width:100%" v-model="editDlg.info.datasvrId" >
                            <el-option v-for="item in dicts.datasvrs" :key="item.datasvrId" :label="item.datasvrName" :value="item.datasvrId" />
                        </el-select>
                    </div>
                </div> 
                <div class="edRow">
                    <div class="lab">通信服务器</div>
                    <div class="edit"> 
                        <el-select style="width:100%" v-model="editDlg.info.mqsvrId" >
                            <el-option v-for="item in dicts.mqsvrs" :key="item.mqsvrId" :label="item.mqsvrName" :value="item.mqsvrId" />
                        </el-select>
                    </div>
                </div> 
                <div class="edRow">
                    <div class="lab">串口参数</div>
                    <div class="edit">
                        <el-input 
                            v-model="editDlg.info.comInfo"
                            :autosize="{ minRows: 2, maxRows: 10 }"
                            type="textarea">
                        </el-input> 
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">远程参数</div>
                    <div class="edit">
                        <el-input 
                            v-model="editDlg.info.remoteInfo"
                            :autosize="{ minRows: 2, maxRows: 10 }"
                            type="textarea">
                        </el-input> 
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">扩展属性</div>
                    <div class="edit">
                        <el-input 
                            v-model="editDlg.info.exInfo"
                            :autosize="{ minRows: 2, maxRows: 10 }"
                            type="textarea">
                        </el-input> 
                    </div>
                </div>
                <div class="edRow">
                    <div class="lab">备注</div>
                    <div class="edit">
                        <el-input v-model="editDlg.info.channelDesc"></el-input>
                    </div>
                </div>
                
                <div class="edBtnRow">
                    <el-button type="default" @click="editDlg.status=false"><i class="fa fa-reply btnicon"></i> 取消</el-button>
                    <el-button type="primary" @click="acPost"><i class="fa fa-save btnicon"></i> 保存</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {admin} from '../../admin';
    import { ElMessage, ElMessageBox } from 'element-plus';
    export default {
        mounted(){
            var me = this;
            try {
                me.$nextTick().then(_=>{
                    return me.init();
                }).then(_=>{
                    me.refresh();
                })
            } catch (error) {
                console.log(error)
            }
        },
        data(){
            return { 
                pageState:{
                    filterTerValue:[],
                },
                pageStateKey : "zn_admin_collecting_channel",
                dicts:{ 
                    syses:[],
                    datasvrs:[],
                    mqsvrs:[],
                    ters:[],
                    sysTerData:[]
                },
                tabDatas:[],
                editDlg:{
                    status: false  ,
                    info:{},
                    rowId : 0 
                },
                props :{
                    expandTrigger: 'hover' 
                }
            }
        },
        methods:{
            init(){
                var me = this;
                return new Promise((su,fa)=>{
                    try {
                        me.pageState = admin.api.getSessionObj( me.pageStateKey , me.pageState); 
                        var dataKey = "admin/collecting/channel/dict.txt";
                        var ps = {};
                        admin.api.query(dataKey , ps).then(_res=>{ 
                            me.dicts.syses = _res.datasetList[0];
                            me.dicts.datasvrs = _res.datasetList[1];
                            me.dicts.mqsvrs = _res.datasetList[2];
                            me.dicts.ters = _res.datasetList[3];
                            me.dicts.protocolTypes = _res.datasetList[4];
                            me.dicts.sysTerData = me.dicts.syses.map( s=>{
                                var item = {
                                    label: s.sysName ,
                                    value: s.sysId ,
                                    children : me.dicts.ters.filter( t=>{
                                        return t.sysId == s.sysId;
                                    }).map(t=>{
                                        return{
                                            label: t.terName ,
                                            value: t.terId
                                        }
                                    })
                                };
                                return item;
                            }).filter( s=>{
                                return s.children.length>0;
                            })
                            console.log(me.dicts)
                            su();
                        }) ; 
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            }, 
            getCurrentTerId(){
                var me = this;
                var res = 0;
                try {
                    res = me.pageState.filterTerValue && me.pageState.filterTerValue!=null && me.pageState.filterTerValue.length>0 ?
                        me.pageState.filterTerValue[1] :0;
                } catch (error) {
                    console.log(error)
                }
                return res;
            },
            refresh(){
                var me = this;
                try {
                    admin.api.setSessionObj(me.pageStateKey , me.pageState);
                    var dataKey = "admin/collecting/channel/list.txt"; 
                    var terId = me.getCurrentTerId(); 
                    
                    var ps = {
                        terId: terId
                    };
                    admin.api.query(dataKey , ps).then(_res=>{ 
                        me.tabDatas = _res.recordset;
                        console.log('channel' , me.tabDatas)
                    })
                } catch (error) {
                    console.log(error)
                }
            },
            acShowEdit(rowId,row){
                var me = this;
                try {
                    var terId = me.getCurrentTerId(); 
                    if( terId<=0){
                        me.$message.error("请选择采集终端！");
                    }
                    else{
                        me.editDlg.rowId = rowId;
                        me.editDlg.info = rowId == 0 ? {                        
                            channelCode:"", 
                            channelName:"",                   
                            protocolTypeCode:"", 
                            channelDesc:"",
                            terId: terId,
                            datasvrId :0 ,
                            mqsvrId:0,
                            comInfo:"{}",
                            remoteInfo:"{}",
                            exInfo:"{}"
                        }: row;
                        me.editDlg.status = true; 
                        console.log(me.editDlg)
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            acPost(){
                var me = this;
                try {
                    var ps = {};
                    if( me.editDlg.rowId >0  ){
                        ps = JSON.parse(JSON.stringify(me.editDlg.info))
                        delete ps['channelId']
                        admin.api.updateRow( "T_Channel" , ps , {channelId: me.editDlg.info.channelId}).then(_postRes=>{
                            if( _postRes.queryStatus ==0 ){
                                me.$message.error('提交失败！')
                            }
                            else{
                                me.refresh();
                                me.editDlg.status = false;
                            }
                        })
                    }
                    else{
                        ps = me.editDlg.info;
                        admin.api.createRow( "T_Channel" , ps  ).then(_postRes=>{
                            if( _postRes.queryStatus ==0 ){
                                me.$message.error('提交失败！')
                            }
                            else{
                                me.refresh();
                                me.editDlg.status = false;
                            }
                        })
                    }
                    
                } catch (error) {
                    console.log(error)
                }
            },
            acDelete(row){
                var me = this;
                try {
                    var msg = "是否确定要删除当前采集通道？";
                    ElMessageBox.confirm(
                        msg,
                        '删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    ).then(() => { 
                        var ps = {
                            channelId : row.channelId 
                        };
                        admin.api.delechannelow( "T_Channel" ,ps ).then(_=>{
                            me.refresh();
                        })
                    }).catch(() => { 
                    })
                } catch (error) {
                    console.log(error)
                }
            }, 
        }
    }
</script>

<style lang="less" scoped>
@import url('../../admin.less');

</style>